<template>
  <div style="height: 100%;background-color:white ;">
    <PreviewDialog ref="preview"
                   :medicalCalculatorData="medicalCalculatorData"
                   :calculatorSore="calculatorSore"
                   :describeContent="describeContent"
                   :fields="fields"
                   :type="cntFormulaType"/>
    <el-row :gutter="24">
      <el-col :span="8">
        <el-button @click="selectAll()" size="small" type="success">公式推送
        </el-button>
        <el-button @click="calculatorAll()" size="small" type="success">一键推送
        </el-button>
        <el-button @click="option()" plain size="small" type="success">设置
        </el-button>
      </el-col>
      <el-col :span="16" style="right: auto">
        <MedicalCalculatorSyncSearch ref="medicalCalculatorSyncSearch"
                                     @confirm="getTableData"></MedicalCalculatorSyncSearch>
      </el-col>
    </el-row>
    <el-row>
      <div>
        <el-table highlight-current-row :data="SyncTableData" :height="tableHeight" @selection-change="handleCalculatorSelectionChange" border
                  stripe
                  style="width: 100%;margin-top: 10px">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="公式名称" min-width="300" prop="formulaName">
            <template slot-scope="scope">
              <span v-html="scope.row.formulaName"></span>
            </template>
          </el-table-column>
          <el-table-column label="版本号" min-width="70" prop="version"></el-table-column>
          <el-table-column label="公式类型" prop="formulaType" width="100">
            <template slot-scope="scope">
              <span v-if="1 === scope.row.formulaType ">计算型</span>
              <span v-if="2 === scope.row.formulaType ">评分型</span>
              <span v-if="3 === scope.row.formulaType ">描述型</span>
            </template>
          </el-table-column>
          <el-table-column :key=index :label="item.name" min-width="120" v-for="(item,index) in tableInnerData[0]">
            <template slot-scope="scope">
              <span v-for="(item2,index2) in scope.row.medicalCalculatorFieldList"
                    v-if="index2 == index"> {{ item2.property }} </span>
            </template>
          </el-table-column>
          <el-table-column label="关联平台" min-width="150" prop="property"></el-table-column>
          <el-table-column label="推送时间" min-width="160" prop="operatedTime"></el-table-column>
          <el-table-column label="状态" min-width="150" prop="syncStatus">
            <template slot-scope="scope">
              <span v-if="scope.row.syncStatus === 0" style="color: red">推送失败</span>
              <span v-else-if="scope.row.syncStatus === 1" style="color: red">消费失败</span>
              <span v-else-if="scope.row.syncStatus === 3">推送成功</span>
              <span v-else style="color: #FF8C00">待推送</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="150">
            <template slot-scope="scope">
              <span><el-link @click.prevent="showPreviewDialog(scope.row.id)" type="primary">详情</el-link></span>
              <span><el-link @click="sync(scope.row)" type="primary">推送</el-link></span>
              <span><el-link @click.prevent="showLog(scope.row.formulaName,scope.row.id)"
                             type="primary">日志</el-link></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
    <el-row>
      <div style="margin-top: 10px">
        <el-pagination :page-size="pageSize"
                       :total="totalNum"
                       :page-sizes="[5, 10, 15, 20, 50, 100]"
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange"
                       background
                       layout="total, sizes, prev, pager, next, jumper"
                       style="text-align: right;"
                       v-if="multiplePages"></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
import MedicalCalculatorSyncSearch from "./MedicalCalculatorSyncSearch";
import PreviewDialog from "./exportModel/PreviewDialog";

export default {
  beforeRouteLeave(to, from, next) {
    //跳转到搜索页面时，search为搜索页面名称
    if (to.name == 'releaseAndSyncTab') {
      to.meta.isUseCache = true;
    }
    next();
  },
  name: "MedicalCalculatorSyncTable",
  components: {
    MedicalCalculatorSyncSearch,
      PreviewDialog
    },
    data() {
      return {
        previewDialogVisible: false,
        medicalCalculatorData: [],
        calculatorSore: [],
        describeContent: '',
        fields: [],
        cntFormulaType: 1,
        multiplePlatformSelection: [],
        SyncTableData: [],
        totalNum: 0,
        currentPage: 0, // 第几页
        pageSize: 10, // 每页显示的数据个数
        multiplePages: true,
        tableHeight: '',
        multipleCalculatorSelection: [],
        selectionChange: [],
        tableInnerData: [],
        name: '',
        subject: '',
        platform: '',
        type: '',
        createTime: '',
        editTableData: [],
        syncType: '',//all为一键， multiple为全选
        calculatorName: '',
        bindingPlatform: '',
        syncStatus: ''
      }
    },
    methods: {
      showPreviewDialog: function (id) {
        this.axios.get('/pmph/action/medicalCalculator/selectReleasedCalculatorById', {
          params: {
            id: id,
          }
        }).then((response) => {
          this.medicalCalculatorData = response.data.medicalCalculatorData
          this.calculatorSore = response.data.calculatorSore
          this.describeContent = response.data.describeContent
          if (!this.describeContent) {
            this.describeContent = '无'
          }
          this.fields = response.data.fields
          this.cntFormulaType = response.data.type
          this.previewDialogVisible = true
        });
      },
      // 单条同步
      sync: function (row) {
        this.syncCalculator(row.id)
      },
      syncCalculator(calculatorIds) {
        if (UTIL.isEmpty(this.$refs.medicalCalculatorSyncSearch.bindingPlatform)) {
          return;
        }
        this.axios.get('/pmph/action/medicalCalculator/syncCalculator', {
          params: {
            calculatorIds,
            platformIds: this.$refs.medicalCalculatorSyncSearch.bindingPlatform,
            syncType: this.syncType
          }
        }).then((res) => {
        })
      },
      option: function () {
        this.$router.push("/calculatorOption")
      },
      handleCalculatorSelectionChange(selection) {
        this.multipleCalculatorSelection = selection;
      },
      handleCurrentChange: function (val) {
        this.currentPage = val - 1;
        this.getTableData();
      },
      selectAll: function () {
        if (this.multipleCalculatorSelection.length <= 0) {
          this.$message.warning("请选择一条医学公式")
          return;
        }
        let calculatorIds = this.multipleCalculatorSelection.map(item => item.id).join(",");
        this.syncType = 'multiple';
        this.syncCalculator(calculatorIds);
      },
      showLog: function (name, id) {
        this.$router.push({
            path: '/syncCalculatorLog',
            query: {calculatorName: name, id: id}
          }
        )
      },
      calculatorAll: function () {
        this.syncType = 'all';
        this.syncCalculator('');
      },
      getTableData: function (isFromChild) {
        if (UTIL.isNotEmpty(isFromChild)) {
          this.currentPage = 0;
        }
        if (UTIL.isEmpty(this.$refs.medicalCalculatorSyncSearch.bindingPlatform)) {
          return;
        }
        this.axios.get('/pmph/action/medicalCalculator/selectSyncList', {
          params: {
            currentPage: this.currentPage,
            pageNum: this.pageSize,
            name: this.$refs.medicalCalculatorSyncSearch.name,
            subject: JSON.stringify(this.$refs.medicalCalculatorSyncSearch.subject),
            platform: this.$refs.medicalCalculatorSyncSearch.platform,
            type: this.$refs.medicalCalculatorSyncSearch.type,
            createTime: UTIL.isNotEmpty(this.$refs.medicalCalculatorSyncSearch.createTime) ? this.$refs.medicalCalculatorSyncSearch.createTime.toString() : '',
            syncStatus: this.$refs.medicalCalculatorSyncSearch.syncStatus,
            bindingPlatform: this.$refs.medicalCalculatorSyncSearch.bindingPlatform
          }
        }).then((response) => {
          this.noData = response.data.totalNum <= 0;
          this.SyncTableData = response.data.tableData;
          this.totalNum = response.data.totalNum;
          for (let i = 0; i < response.data.tableData.length; i++) {
            this.tableInnerData.push(response.data.tableData[i].medicalCalculatorFieldList);
          }
        }).catch((error) => {
          console.error(error);
          this.SyncTableData = [];
          this.noData = true;
          this.$message.error("未能请求到数据");
        })
      },
      handleSizeChange(value) {
        this.pageSize = value
      }
    },
    created() {
      this.tableHeight = CONST.WORKSPACE_HEIGHT - 160;
      this.getTableData()
    }
  }
</script>

<style scoped>

</style>
